<template>
  <div class="seven flex_column">
    <everyHorn />
    <div class="tital_home">
      <img src="@/assets/img/home-page/seven_title.png" alt="">
      <h2>本月采购情况</h2>
    </div>
    <div v-if="btnSeven" class="main flex_1">
      <div class="top">
        <p class="text">采购单数量：<span class="num num-max green">
          <animate-number :key="chartData.purchaseNum" from="0" :to="chartData.purchaseNum" duration="3000" />
        </span></p>
        <p class="text">采购SKU数：<span class="num gray">
          <animate-number :key="chartData.goodsTypeNum" from="0" :to="chartData.goodsTypeNum" duration="3000" />
        </span></p>
        <p class="text">采购PCS数：<span class="num gray">
          <animate-number :key="chartData.purchasePCSNum" from="0" :to="chartData.purchasePCSNum" duration="3000" />
        </span></p>
        <p class="text">到货PCS数：<span class="num num-max yellow">
          <animate-number :key="chartData.receivePCSNum" from="0" :to="chartData.receivePCSNum" duration="3000" />
        </span></p>
      </div>
      <div class="bottom">
        <div id="chart" class="chart" />
      </div>
    </div>
    <div v-else class="main flex_1 flex_column flex_center">
      暂无权限
    </div>
  </div>
</template>

<script>

import everyHorn from './every_horn.vue'
import '@/assets/js/echarts-liquidfill.min.js'
import { authoritymanagement } from '@/assets/js/utils.js'
const echarts = require('echarts')
var myChart // 全局定义变量
export default {
  name: '',
  components: {
    everyHorn
  },
  data() {
    return {
      btnSeven: '', // 查看权限
      chartData: {
        goodsTypeNum: 0,
        purchaseNum: 0,
        purchasePCSNum: 0,
        ratio: 0,
        receivePCSNum: 0
      }
    }
  },
  mounted() {
    // this.init()
    // 获取当前登录人权限
    let RoleCode = this.$getLocalItem('jx_RoleCode')
    this.btnSeven = authoritymanagement(RoleCode, 'lypc_btn_btnSeven')
    if (this.btnSeven) {
      this.getData()
    }
  },
  methods: {
    init() {
      this.drawChart()
    },
    async getData() {
      let res = await this.$API.homePage.purchaseMonthNum()
      if (res) {
        this.chartData = res.responseBody
        this.init()
      }
    },
    drawChart() {
      // const ColorList = ['#E8FF94', '#89FEBA', '#5EDCEB', '#57A4FF', '#8E87FF']
      var arrayTemp = [
        {
          value: (this.chartData.ratio * 100).toFixed(4),
          name: '到货比例',
          num: 100
        }
      ]
      var titleData = []
      var series = []
      arrayTemp.forEach((item, index) => {
        const color = '#1E90FF'
        titleData.push({
          text: item.name,
          x: `48%`,
          y: ' 20%',
          textAlign: 'center',
          textStyle: {
            fontSize: '14',
            color: color,
            textAlign: 'center'
          }
        })
        series.push({
          type: 'liquidFill',
          name: item.name,
          radius: '80%',
          center: [`50%`, '50%'],
          //  shape: 'roundRect',
          data: [
            {
              // NOTE 为了扩大鼠标悬浮热区 tooltip展示
              value: 1,
              itemStyle: {
                color: 'transparent'
              }
            },
            item.value / 100
          ],
          backgroundStyle: {
            color: 'transparent'
          },
          color: [color],
          itemStyle: {
            opacity: 0.6
          },
          outline: {
            borderDistance: 5,
            itemStyle: {
              borderWidth: 2,
              borderColor: color,
              shadowBlur: 15,
              shadowColor: '#1E90FF'
            }
          },
          label: {
            position: ['50%', '50%'],
            formatter: function() {
              return `${item.value}%`
            },
            fontSize: 18,
            color: '#fff'
          }
        })
      })
      let option = {
        title: titleData,
        series: series,
        tooltip: {
          show: true
        }
      }
      this.drawEcharts('chart', option)
    },
    // Echarts绘图
    drawEcharts(id, option) {
      if (myChart != null && myChart != '' && myChart != undefined) {
        myChart.dispose()// 销毁
      }
      myChart = echarts.init(document.getElementById(id)) // echartsExample是显示echart的元素id
      myChart.setOption(option)
      // this.loading = false
      return myChart
    }
  }
}
</script>

<style lang="scss" scoped>
.seven {
  width: 402px;
  height: 505px;
  background-image: url('~@/assets/img/home-page/seven.png');
  background-repeat: no-repeat;
  background-size: 100% 100%;
  .main {
    display: flex;
    flex-direction: column;
    .top {
      display:flex;
      width: 100%;
      padding: 0 10px;
      flex-wrap: wrap;
      // flex-direction: column;
      // justify-content: space-evenly;
      p {
        margin: 10px 50px;
        width: 100px;
      }
      .text {
        line-height: 40px;
        font-size: 16px;
        font-weight: bold;
      }
      .num {
        font-size: 36px;
        font-weight: bold;
        padding-left: 10px;
        color: rgb(187, 230, 224);
      }
      // .num-max {
      //   font-size: 24px;
      // }
    }
    .bottom {
      display: flex;
      flex:1;
      justify-content: space-around;
      align-items: center;
      .chart {
        width: 220px;
        height: 200px;
        // background-color: #16b93f;
      }
    }
  }
  // .green {
  //   color: #16b93f;
  // }
  // .gray {
  //   color: #0076f9;
  // }
  // .yellow {
  //   color: rgb(219, 208, 48);
  // }
}
</style>
